<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#mycan {
			border: 1px solid;
			background-color: black;
		}
		a{
			text-decoration: none;
		}
	</style>

	<body>
		<p><a href="shizhong.html">表</a></p>
		<p><a href="index.html">五子棋</a></p>
		<canvas id="mycan" width="1500px" height="500px"></canvas>
		<script src="numArray.js"></script>
		<script type="text/javascript">
			var can = document.getElementById("mycan");
			var bi = can.getContext("2d");

			function num(numbers) {
				for(var i = 0; i < numbers.length; i++) {
					for(var k = 0; k < numbers[i].length; k++) {
						if(numbers[i][k] == 1) {
							bi.beginPath();
							bi.arc(k * 20 + 10, i * 20 + 10, 10, 0, 2 * Math.PI);
							bi.fill();
						};

					};
				};
			};
			var time;

			function shiJian() {
				time = new Date();
				var hh = time.getHours();
				var dd = time.getMinutes();
				var ss = time.getSeconds();
				var shijian = [];
				shijian.push(parseInt(hh / 10));
				shijian.push(parseInt(hh % 10));
				shijian.push(10);
				shijian.push(parseInt(dd / 10));
				shijian.push(parseInt(dd % 10));
				shijian.push(10);
				shijian.push(parseInt(ss / 10));
				shijian.push(parseInt(ss % 10));
				//					var t=0;
				for(var i = 0; i < shijian.length; i++) {
					bi.fillStyle = "white";
					//                  bi.globalAlpha=0.7;
					num(numbers[shijian[i]]);
					if(i == 2 || i == 5) {
						bi.translate(80, 0);
						//						t+=80;
					} else if(i == 1 || i == 4) {
						bi.translate(140, 0);
						//						t+=140;
					} else {
						bi.translate(160, 0);
						//						t+=160;
					}
				};
				//					console.log(t);
			};
			shiJian();
			setInterval(function() {
				bi.translate(-1080, 0);
				bi.clearRect(0, 0, 1500, 500)
				shiJian1();
				shiJian()
			}, 50);

			function shiJian1() {
				var times = new Date();
				var hh = times.getHours();
				var dd = times.getMinutes();
				var ss = times.getSeconds();
				//					console.log("times"+ss+":"+dd+":"+ss);
				if(ss != time.getSeconds()) {
					if(parseInt(ss / 10) != parseInt(time.getSeconds() / 10)) {
						xiaoQiu(parseInt(time.getSeconds() / 10), 760, 10)
					};
					if(parseInt(ss % 10) != parseInt(time.getSeconds() % 10)) {
						xiaoQiu(parseInt(time.getSeconds() % 10), 920, 10)
					};
				};
				if(dd != time.getMinutes()) {
					if(parseInt(dd / 10) != parseInt(time.getMinutes() / 10)) {
						xiaoQiu(parseInt(time.getSeconds() / 10), 380, 10)
					};
					if(parseInt(dd % 10) != parseInt(time.getMinutes() % 10)) {
						xiaoQiu(parseInt(time.getSeconds() % 10), 540, 10)
					};
				};
				if(hh != time.getHours()) {
					if(parseInt(hh / 10) != parseInt(time.getHours() / 10)) {
						xiaoQiu(parseInt(time.getSeconds() / 10), 0, 10)
					};
					if(parseInt(hh % 10) != parseInt(time.getHours() % 10)) {
						xiaoQiu(parseInt(time.getSeconds() % 10), 160, 10)
					};
				};
				drawBall(bi);
			};

			var balls = [];

			function Ball(x, y) {
				this.x = x;
				this.y = y;
				var xy = Math.random() > 0.5 ? -1 : 1;
				this.vx = (parseInt(Math.random() * 10) + 5) * xy;
				xy = Math.random() > 0.5 ? -1 : 1;
				this.vy = parseInt(Math.random() * 20) * xy;
				this.color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")"
			};

			function xiaoQiu(sum, x, y) {
				for(var i = 0; i < numbers[sum].length; i++) {
					for(var k = 0; k < numbers[sum][i].length; k++) {
						if(numbers[sum][i][k] == 1) {
							balls.push(new Ball(x + k * 20, y + i * 20));
						};
					};
				};
			};

			function drawBall(bi) {
				var cunt = 0;
				for(var i = 0; i < balls.length; i++) {
					bi.beginPath();
					bi.fillStyle = balls[i].color;
					bi.arc(balls[i].x, balls[i].y, 10, 0, 2 * Math.PI);
					bi.fill();
					if(balls[i].y + 10 > 500) {
						balls[i].y = 490
						balls[i].vy = -0.7 * balls[i].vy
					}
					balls[i].y += balls[i].vy;
					balls[i].vy += 9.8;
					balls[i].x += balls[i].vx;

					if(balls[i].x > -10 && balls[i].x < 1500) {
						balls[cunt++] = balls[i]
					};
				};

				while(cunt < balls.length) {
					balls.pop();
				};
			};
		</script>
	</body>

</html>